<template>
  <div class="mypostbody">
    <span style="flex: 1"></span>
    <div class="mypostleft">
      <div>
        <el-avatar shape="square" :size="100" :src="Loginer.img" style="margin: 10px;border: 1px solid #a0bbff" />
        <ul >
          <li>
            <span>{{ clicklikepost.postNum }}</span>
            <span>发帖</span>
          </li>
          <li>
            <span>{{clicklikepost.replyNum}}</span>
            <span>回帖</span>
          </li>
          <li>
            <span v-if="clicklikepost.postNum == '0'">{{clicklikepost.likeNum}}</span>
            <span v-else>{{clicklikepost.likeNum/clicklikepost.postNum}}</span>
            <span>获赞</span>
          </li>
        </ul>
      </div>
      <div>
        <button class="mypostbut" @click="post_reply(0)">我的帖子</button>
      </div>
      <div>
        <button class="mypostbut" @click="post_reply(1)">我的回复</button>
      </div>
    </div>
    <el-scrollbar style="width: 680px;border: 1px solid #cbcbcb;">
      <div class="righttitle">{{postreply}}</div>
      <ul class="rightconli">
        <li v-for="(item,index) in mypostlist" :key="index">
          <div class="rightconli_top">
            <h3 v-if="postreply === '我的帖子'">{{item.title}}</h3>
            <h3 v-if="postreply === '我的回帖'">{{item.content}}</h3>
            <p v-if="postreply === '我的回帖'">回复 <span style="padding: 1px 2px">{{item.postUserType}}-{{item.postUserId}}</span></p>
          </div>
          <div class="rightconli_li">
            <p>发布于 {{item.date}}</p>
            <span v-if="postreply === '我的帖子'"><i class="iconfont icon-liulan"></i> {{item.click}}</span>
            <span v-else><i class="iconfont icon-31dianzan"></i> {{item.likeNum}}</span>
          </div>
          <div class="Rli_action">
            <el-button type="primary" @click="querymypost(index)">查看</el-button>
            <el-button v-if="postreply === '我的帖子'" type="danger" :icon="Delete" @click="delmypost(item.postId)"></el-button>
            <el-button v-else type="danger" :icon="Delete" @click="delmypost(item.replyId)"></el-button>
          </div>
        </li>
      </ul>
    </el-scrollbar>
    <span style="flex: 1"></span>
    <div class="menu-box" v-if="LoginI">
      <!-- 图标按钮 -->
      <div class="menu-button" @click="ClickDHL">
        <div class="line-box">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 菜单列表 -->
      <ul class="menu-list">
        <li @click="myPost"><i class="iconfont icon-wofadetiezi"></i><span>我的帖子</span></li>
        <li @click="toPost"><i class="iconfont icon-huifu"></i><span>发布帖子</span></li>
        <li @click="toHome"><i class="iconfont icon-shouye"></i><span>首页</span></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  ChatDotRound,
  Delete,
} from '@element-plus/icons-vue'
import router from "@/router";
import {useStore} from "vuex";
import {deletePostById, getInforByIdType, getMyPosts, getOnePost} from "@/api/post";
import {ElMessage} from "element-plus";
import {deleteReplyById, getMyReplys} from "@/api/reply";
const store = useStore()
const LoginI = store.getters.Id
const Loginer = JSON.parse(localStorage.getItem('loginer'))

const postreply = ref('我的帖子')
const clicklikepost = ref({})

const mypostlist = ref({})

//我的点赞，回帖，发帖
getInforByIdType({id:LoginI,type:store.getters.Type}).then(res=>{
  if (res.code === 20041){
    clicklikepost.value = res.data
  }else {
    ElMessage.error('发帖数，回帖数，点赞数获取失败')
  }
})

//我的所有帖子
const GetMyPosts = async () =>{
  await getMyPosts(LoginI).then(res=>{
    if (res.code === 20041){
      mypostlist.value = res.data
    }else {
      ElMessage.error('我的帖子获取失败')
    }
  })
}
GetMyPosts()
//我的所有评论
const GetMyReplys = async () =>{
  await getMyReplys(LoginI).then(res=>{
    if (res.code === 20041){
      mypostlist.value = res.data
      console.log(res.data)
    }else {
      ElMessage.error('我的帖子获取失败')
    }
  })
}


//下方导航
const ClickDHL = () =>{
  // 要操作的元素
  const menu_box=document.querySelector('.menu-box');
  menu_box.classList.toggle('active');

}
//我的帖子
const myPost = () =>{
  router.replace('/mypost')
}
//发布帖子
const toPost = () =>{
  router.replace('/post')
}
//帖子首页
const toHome = () =>{
  router.replace('/fourmm')
}

//帖子，回帖
const post_reply = async (select) =>{
  if (select === 0){
    await GetMyPosts()
    postreply.value = '我的帖子'
  }else {
    await GetMyReplys()
    postreply.value = '我的回帖'
  }
}
//查看我的帖子、评论
const querymypost = async (index) =>{
  if (postreply.value === '我的帖子'){
    await store.dispatch('app/OnePost', mypostlist.value[index])
    await router.replace('/onepost')
  }else {
    await getOnePost(mypostlist.value[index].postId).then(res=>{
      if (res.code === 20041){
        store.dispatch('app/OnePost',res.data)
        router.replace('/onepost')
        console.log(res.data)
      }else {
        ElMessage.error('帖子获取失败')
      }
    })
  }
}
//删除我的帖子、评论
const delmypost = async (Id) =>{
  if (postreply.value === '我的帖子'){
    await deletePostById(Id).then(res=>{
      if (res.code === 20021){
        ElMessage.success('删除成功')
      }else {
        ElMessage.error('删除失败')
      }
      GetMyPosts()
    })
  }else {
    await deleteReplyById(Id).then(res=>{
      if (res.code === 20021){
        ElMessage.success('删除成功')
      }else {
        ElMessage.error('删除失败')
      }
      GetMyReplys()
    })
  }
}

</script>

<style scoped>
/**{*/
/*  border: 1px solid red;*/
/*}*/
.mypostbody{
  flex: 1;
  overflow: hidden;
  display: flex;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
}
.mypostleft{
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*border: 1px solid #cbcbcb;*/
  box-sizing: border-box;
  margin-right: 20px;
}
.mypostleft>div:first-child{
  box-sizing: border-box;
  margin: 10px;
  width: 100%;
  height: 200px;
  text-align: center;
  border: 1px solid #cbcbcb;
}
.mypostleft>div:not(:first-child){
  box-sizing: border-box;
  margin-bottom: 10px;
  width: 100%;
  height: 50px;
  text-align: center;
}
.mypostleft ul{
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
}
.mypostleft li{
  display: flex;
  flex-direction: column;
}
.mypostleft li>span:first-child{
  font-weight: 600;
}
.mypostleft li>span:last-child{
  font-weight: 600;
  font-family: 华文仿宋, serif;
  color: #99a9bf;
}
.righttitle{
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  font-family: 华文楷体, serif;
}
.rightconli{
  list-style-type: none;
}
.rightconli>li{
  height: auto;
  box-sizing: border-box;
  margin: 5px;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  border: 1px solid #cbcbcb;
  transition: all .2s ease;
}
.rightconli>li:hover{
  box-shadow: #cccccc 0 0 6px;
}
.Rli_action{
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0,-50%);
  width: 180px;
  height: 100%;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-evenly;
  background: rgba(44, 44, 44, 0.3);
  transition: all .2s ease;
}
.rightconli>li:hover .Rli_action{
  transform: translate(-180px,-50%);
}
.rightconli_top{
  display: flex;
  justify-content: space-between;
}
.rightconli_top>p,
.rightconli_top>h3{
  margin: 5px 0;
}
.rightconli_top>h3{
  margin-right: 10px;
  font-weight: 600;
  font-size: 20px;
  font-family: 华文仿宋, serif;
}
.rightconli_top>p{
  margin-left: 10px;
  white-space: nowrap;
  font-size: small;
}
.rightconli_top>p>span{
  border: 1px solid #4da9ff;
  color: #4da9ff;
}
.rightconli_li{
  font-size: small;
}
.rightconli_li>p{
  float: left;
  color: #99a9bf;
}
.rightconli_li>span{
  float: right;
  color: #99a9bf;
  padding: 1px 5px;
  border-right: 2px solid #e1e1e1;
}






.menu-box{
  /* 固定定位 右下角 */
  position: fixed;
  bottom: 40px;
  right: 40px;
}
/* 菜单按钮 */
.menu-button{
  width: 50px;
  height: 50px;
  background-color: #5c67ff;
  border-radius: 50%;
  /* 投影 */
  box-shadow: 0 0 0 4px rgba(92,103,255,0.3);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /* 过渡 */
  transition: 0.2s ease-in;
}
.menu-button:hover{
  background-color: #4854ff;
  box-shadow: 0 0 0 8px rgba(92,103,255,0.3);
}
.menu-button .line-box{
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
/* 菜单按钮图标（三条杠） */
.menu-button .line{
  background-color: #fff;
  width: 100%;
  height: 2px;
  border-radius: 2px;
}
/* 前后两条短，中间的长 */
.menu-button .line:first-child{
  width: 50%;
  /* 设置变换的基点 */
  transform-origin: right;
  /* 过渡效果 */
  transition: transform 0.3s ease-in-out;
}
.menu-button .line:last-child{
  width: 50%;
  align-self: flex-end;
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
/* 菜单列表 */
.menu-list{
  width: 140px;
  height: 160px;
  background-color: #fff;
  border-radius: 8px;
  list-style: none;
  padding: 6px;
  box-shadow: 0 0 4px 4px rgba(92,103,255,0.15);
  position: absolute;
  right: 15px;
  bottom: 15px;
  /* 默认隐藏 */
  opacity: 0;
  transform: scale(0);
  /* 设置变换的基点 */
  transform-origin: bottom right;
  /* 过渡效果 */
  transition: 0.3s ease;
  /* 过渡延迟 */
  transition-delay: 0.1s;
}
/* 菜单项 */
.menu-list li{
  display: flex;
  align-items: center;
  padding: 10px;
  color: #1c3991;
  cursor: pointer;
  position: relative;
  /* 默认隐藏 */
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.2s ease-in;
}
.menu-list li:hover{
  color: #5c67ff;
}
/* 菜单项下边框 */
.menu-list li::before{
  content: "";
  width: calc(100% - 24px);
  height: 1px;
  background-color: rgba(92,103,255,0.1);
  position: absolute;
  bottom: 0;
  left: 12px;
}
/* 最后一项不用下边框 */
.menu-list li:last-child::before{
  display: none;
}
/* 菜单项图标 */
.menu-list .fa{
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 菜单项文本 */
.menu-list span{
  font-size: 14px;
  margin-left: 8px;
}
/* 活动态下的部分样式变化 */
/* 三条杠的变化 */
.active .line-box{
  transform: rotate(-45deg);
}
.active .line-box .line:first-child{
  transform: rotate(-90deg) translateX(1px);
}
.active .line-box .line:last-child{
  transform: rotate(-90deg) translateX(-1px);
}
/* 菜单列表的变化 */
.active .menu-list{
  opacity: 1;
  transform: scale(1);
}
.active .menu-list li{
  /* 执行动画：动画名 时长 线性 停留在最后一帧 */
  animation: fade-in-item 0.4s linear forwards;
}
/* 接下来为每一项设置动画延迟时间 */
.active .menu-list li:nth-child(1){
  animation-delay: 0.1s;
}
.active .menu-list li:nth-child(2){
  animation-delay: 0.2s;
}
.active .menu-list li:nth-child(3){
  animation-delay: 0.3s;
}
.active .menu-list li:nth-child(4){
  animation-delay: 0.4s;
}

/* 定义动画 */
@keyframes fade-in-item {
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

/* From uiverse.io by @ferlagher */
.mypostbut{
  position: relative;
  font-size: 1.2em;
  width: 100%;
  padding: 0.7em 1.4em;
  background-color: #6464ff;
  text-decoration: none;
  border: none;
  border-radius: 0.5em;
  color: #ffffff;
  /*box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);*/
}

.mypostbut::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, white 0%, white 50%, #5858ff 50%, #6464ff 60%);
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}

.mypostbut:hover::before {
  width: 1.6em;
  height: 1.6em;
}

.mypostbut:active {
  transform: translate(0.01em, 0.01em);
}
</style>